<template>
  <div>
      <router-link tag="div" to="/" class="header-abs" v-show="showAbs"> 
            <div class="iconfont header-abs-back">&#xe624;</div>
      </router-link>
      <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
            <router-link to="/">
                <div class="iconfont header-fixed-back">&#xe624;</div>
            </router-link>
            {{sightName}}
      </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  props: {
      sightName:String
  },
  data () {
      return {
          showAbs: true,
          opacityStyle:{
              opacity: 0
          }
      }
  },
  methods: {
      handleScroll () {
        const top = document.documentElement.scrollTop
        if (top > 30 ) {
            let opacity = top / 140
            opacity = opacity > 1 ? 1 : opacity
            this.opacityStyle.opacity = opacity
            this.showAbs = false
        } else {
            this.showAbs = true
        }
      }
  },
  mounted () {
       window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
      window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="scss" scoped>
  @import '~styles/varibles.scss';
  .header-abs{
      position: absolute;
      left: .2rem;
      top: .2rem;
      width: .8rem;
      height: .8rem;
      line-height: .8rem;
      border-radius: .4rem;
      text-align: center;
      background: rgba(#000,.8);
      z-index: 1;
      .header-abs-back{
          color: #fff;
          font-size: .4rem;
      }
  }
  
  .header-fixed{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: $headerHeight;
      line-height: $headerHeight;
      text-align: center;
      color: #fff;
      font-size: .32rem;
      background-color: $bgColor;
      box-shadow: 0 1px 3px rgba(red,.3);
      .header-fixed-back{
          position: absolute;
          top: 0;
          left: 0;
          width: .64rem;
          text-align: center;
          font-size: .4rem;
          color: #fff;
          
      }
  }
</style>
